<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title> 小张的送水公司后台管理系统</title>
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/jquery.js"></script>
    <script type="text/javascript" src="/login.js"></script>

    <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="/highcharts.js"></script>
    <script src="/highcharts-3d.js"></script>
    <script src="/exporting.js"></script>
    <script src="https://code.hcharts.cn/plugins/zh_cn.js"></script>
    <!--axios 在线-->
    <script src="/axios.min.js"></script>
    <!--Bootstrap固定框架-->
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <link rel='stylesheet' th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap-theme.css}">
    <!--图标库-->
    <link rel='stylesheet' th:href='@{/css/material-design-iconic-font.min.css}'>
    <!--核心样式-->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" href="/css/login.css" />

    <!--button样式-->
    <style>
        /* css 代码  */

        .buttonClass {
            font-size:15px;
            font-family:Arial;
            width:100px;
            height:29px;
            border-width:1px;
            color:#fff;
            border-color:#4e6096;
            border-top-left-radius:10px;
            border-top-right-radius:10px;
            border-bottom-left-radius:10px;
            border-bottom-right-radius:10px;
            box-shadow: 0px 0px 0px 2px #9fb4f2;
            text-shadow: 0px 1px 0px #283966;
            background:linear-gradient(rgb(120, 146, 194), #476e9e);
        }

        .buttonClass:hover {
            background: linear-gradient(#476e9e, rgb(120, 146, 194));
        }

    </style>

</head>

<body>

<div id="viewport">

    <!-- Sidebar -->
    <div id="sidebar"  th:fragment="sidebar">
        <!--导航块-->
        <nav class="navbar navbar-default" th:fragment="navbar"/>

        <header>
            <a href="#">公司后台管理</a>
        </header>
        <ul class="nav" style="background: #37474f">
            <li id="n0">
                <a th:href="@{/hello}">
                    <i id="no_1" class="zmdi zmdi-view-dashboard"></i>
                    <text id="n0_2">首页</text>
                </a>
            </li>
            <li id="n1" >
                <a th:href="@{/cust/listCust}">
                    <i id="n1_2" class="zmdi zmdi-view-dashboard"></i>
                    <text id="n1_1">客户管理</text>
                </a>
            </li>
            <li id="n2">
                <a th:href="@{/worker/workerList}">
                    <i class="zmdi zmdi-link" id="n2_2"></i>
                    <text id="n2_1">送水工管理</text>
                </a>
            </li>
            <li id="n3">
                <a th:href="@{/history/listHis?pageSize=10&pageNum=1}">
                    <i id="n3_2" class="zmdi zmdi-view-list"></i>
                    <text id="n3_1">送水历史管理</text>
                </a>
            </li>
            <li id="n4">
                <a th:href="@{'/salary/searchCalcSalay?startDate=&endDate='}">
                    <i id="n4_2" class="zmdi zmdi-view-toc"></i>
                    <text id="n4_1">计算工资</text>
                </a>
            </li>
            <li id="n5">
                <a th:href="@{/stat/statWaterDetails}">
                    <i class="zmdi zmdi-view-web" id="n5_2"></i> <text id="n5_1">统计送水数量</text>
                </a>
            </li>
            <li id="n7">
                <a th:href="@{/getListOrder}">
                    <i class="zmdi zmdi-view-web" id="n7_2"></i> <text id="n7_1">定单数量统计</text>
                </a>
            </li>
            <li id="n8">
                <a th:href="@{/toFinece}">
                    <i class="zmdi zmdi-view-web" id="n8_2"></i> <text id="n8_1">财务管理</text>
                </a>
            </li>
            <li id="n9">
                <a th:href="@{/toInventory}">
                    <i class="zmdi zmdi-view-web" id="n9_2"></i> <text id="n9_1">库存管理</text>
                </a>
            </li>
            <li id="n6">
                <a th:href="@{/pwd}">
                    <i id="n6_2" class="zmdi zmdi-view-week"></i>
                    <text id="n6_1">修改密码</text>
                </a>
            </li>
        </ul>
    </div>
    <!-- Content -->
    <div id="content">
        <nav class="navbar navbar-default">
            <div class="container-fluid" >
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="#"><i class="zmdi zmdi-notifications text-danger"></i>
                        </a>
                    </li>
                    <li><a href="#" >当前用户:[[${session.currentUser}]]</a></li>
                </ul>
            </div>
        </nav>
        <div class="container-fluid">

        </div>
    </div>

    <!--人物展示-->
    <!--第一名-->
    <div class="body_count">
        <div class="login_count2">
            <img src="/images/1.png" style="width: 60px; height:80px">
            <div style="margin-left: 80px;margin-top: -70px">
                <h1 style="font-size:24px;color: red">冠军</h1>
                <p id="No1" th:name="workerName"></p>
                <p id="NoCount1" th:name="sendWaterCount"></p>
            </div>
        </div>
    </div>
    <!--第二名-->
    <div class="body_count3">
        <div class="login_count3">
            <img src="/images/2.png" style="width: 60px; height:80px">
            <div style="margin-left: 80px;margin-top: -70px">
                <h1 style="font-size:24px;color: blue">亚军</h1>
                <p id="No2" th:name="workerName"></p>
                <p id="NoCount2" th:name="sendWaterCount"></p>
            </div>
        </div>
    </div>
    <!--第三名-->
    <div class="body_count4">
        <div class="login_count4">
            <img src="/images/3.png" style="width: 60px; height:80px">
            <div style="margin-left: 80px;margin-top: -70px">
                <h1 style="font-size:24px;color: orange">季军</h1>
                <p id="No3" th:name="workerName"></p>
                <p id="NoCount3" th:name="sendWaterCount"></p>
            </div>
        </div>
    </div>
    <!--3d饼状图-->
    <div id="container1" style="height: 300px;margin-left: 60%;width: 60%"></div>
    <script>
        var workerName=new Array();
        var sendWaterCount=new Array();
        axios({
            method:"get",
            url:"/main/mainMenu",

        }).then(function (resp) {
            for (let i = 0; i < resp.data.length; i++) {
                var chartElement = resp.data[i];
                console.log(resp);
                workerName[i] = chartElement.workerName;
                sendWaterCount[i] = chartElement.sendWaterCount;
            }
            // JS 代码
            var chart = Highcharts.chart('container1', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,

                    }
                },
                title: {
                    text: '不同送水工的送水数量'
                },

                plotOptions: {
                    pie: {
                        innerSize: 100,
                        depth:45
                    }
                },
                series: [{
                    type: 'pie',
                    name: '送水数量',
                    data: [
                        [workerName[0], sendWaterCount[0]],
                        [workerName[1], sendWaterCount[1]],
                        [workerName[2], sendWaterCount[2]],
                        [workerName[3], sendWaterCount[3]],
                        [workerName[4], sendWaterCount[4]],
                        [workerName[5], sendWaterCount[5]],
                        [workerName[6], sendWaterCount[6]],
                        [workerName[7], sendWaterCount[7]],
                        [workerName[8], sendWaterCount[8]],
                        [workerName[9], sendWaterCount[9]],
                        [workerName[10], sendWaterCount[10]],
                        [workerName[11], sendWaterCount[11]],
                    ]
                }]
            });
        });
    </script>

    <!--柱状图-->
    <div id="container" style="height: 300px"></div>
    <div id="wrapper">
        <button id="plain" class="buttonClass">普通</button>
        <button id="inverted" class="buttonClass">反转</button>
        <button id="polar" class="buttonClass">极地图</button>
    </div>
    <script>
        var workerName=new Array();
        var sendWaterCount=new Array();
        axios({
            method:"get",
            url:"/main/mainMenu",

        }).then(function (resp) {
            for (let i = 0; i < resp.data.length; i++) {
                var chartElement=resp.data[i];
                workerName[i]=chartElement.workerName;
                sendWaterCount[i]=chartElement.sendWaterCount;
            }
            $('#No1').text("姓名："+workerName[0]);
            $('#NoCount1').text("数量："+sendWaterCount[0]);
            $('#No2').text("姓名："+workerName[1]);
            $('#NoCount2').text("数量："+sendWaterCount[1]);
            $('#No3').text("姓名："+workerName[2]);
            $('#NoCount3').text("数量："+sendWaterCount[2]);

            // JS 代码
            var chart = Highcharts.chart('container', {
                title: {
                    text: '送水工排行榜'
                },
                subtitle: {

                },
                xAxis: {
                    categories:workerName
                },
                series: [{
                    type: 'column',
                    colorByPoint: true,
                    data: sendWaterCount,
                    showInLegend: false
                }]
            });
            // 给 wrapper 添加点击事件
            Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
                var target = e.target,
                    button = null;
                if(target.tagName === 'BUTTON') { // 判断点的是否是 button
                    button = target.id;
                    switch(button) {
                        case 'plain':
                            chart.update({
                                chart: {
                                    inverted: false,
                                    polar: false
                                },
                                subtitle: {
                                    text: ''
                                }
                            });
                            break;
                        case 'inverted':
                            chart.update({
                                chart: {
                                    inverted: true,
                                    polar: false
                                },
                                subtitle: {
                                    text: '反转'
                                }
                            });
                            break;
                        case 'polar':
                            chart.update({
                                chart: {
                                    inverted: false,
                                    polar: true
                                },
                                subtitle: {
                                    text: '极地图'
                                }
                            });
                            break;
                    }
                }
            });

        })

    </script>
</div>
<script>
    $(document).ready(function (){
        $("#n0").css("background","#FFF");
        $("#n0_1").css("color","#000");
        $("#n0_2").css("color","#000");

    })
</script>
</body>
</html>